{extend name="public:adminbase" /}

{block name="content"}


<div class="container-fluid p-t-15" id="app">
  
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header">
          <h4>采集头像</h4>
        </div>
        <div class="card-toolbar clearfix">
          <a href="javascript:;" onclick="history.go(-1)" class="btn btn-label btn-primary">
            <label><i class="mdi mdi-arrow-left"></i></label>
            返回上一页
          </a>
          <div style="width: 100%; height: 15px"></div>
          <div class="alert alert-danger alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
            <strong>注意事项：</strong>http://www.ik123.com/q/qqtouxiang/nvsheng/75166.html
          </div>

        </div>
        <div class="card-body">
          <input v-model="url" class="form-control" name="nicknames" rows="12" placeholder="请输入需要采集的网址..">
          <br><br><br>
          <button @click="GetHeads()" class="btn btn-block btn-primary">确认导入</button>

          <div class="row">
            <div class="col-sm-4 col-xs-12">
              <p><code>采集结果</code></p>
              <ul>
                <li v-for="(v,i) in list">
                  <img :src="v" style="width: 50px; height: 50px;" alt="">
                </li>

                <li>
                  <button @click="TimerStart()" class="btn btn-block btn-primary">下载图片</button>

                </li>
              </ul>
            </div>
          </div>
        </div>

      </div>


    </div>
    
  </div>
  
</div>
{include file="public/afooter"}
<script>

var app = new Vue({
    el: '#app',
    data: {
        url:''//带采集的网址
        ,list:[] //头像列表
        ,timer: ''
        ,index:0
    }
    ,methods: {
        GetHeads:function () {
            var url="{:url('')}";
            var _this = this;
            if(!this.url){
                error("请填写地址");
                return false;
            }
            var data = {
                url:this.url,
                type:'gethtml'
            }
            $.post(url,data,function (e) {
                if(e.code ==200){
                    success(e.msg);
                    _this.list = e.data;
                } else {
                    error(e.msg);
                }
            })
        },
        DownloadImg:function () {
            var url="{:url('')}";
            var _this = this;
            var data = {
                url:this.list[this.index],
                type:'downloadimg'
            }
            $.post(url,data,function (e) {
                if(e.code ==200){
                    success(e.msg);
                } else {
                    error(e.msg);
                }
            })
            this.index++
            console.log(this.index)
            if(this.index >= this.list.length){
                clearInterval(this.timer)
            }
        },
        TimerStart:function () {
            //页面挂载需要运行的函数
            this.index = 0;
            this.timer = setInterval(this.DownloadImg, 1000);
        }

    },
    mounted:function(){

    },
    beforeDestroy: function() {
        if (this.timer) {
            console.log("销毁定时器")
            clearInterval(this.timer); //在Vue实例销毁前，清除我们的定时器
        }
    }

})

</script>

{/block}